<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        body {
            overflow-x: hidden;
        }

        #TPLsn01 {
            text-align: center;
        }

        #TPLsn01>* {
            margin-bottom: 1rem;
        }

        input[type="number"] {
            font-size: 2rem;
            width: 10rem;
            text-align: center;
            border-width: 0.2rem;
            border-radius: 0.7rem;
            margin-top: 1rem;
            border-color: #2E7BFD;
        }

        button {
            background-color: #2E7BFD;
        }

        #btn_minus {
            position: relative;
            margin-right: 3rem;
        }

        #btn_add {
            margin-left: 3rem;
        }

        button {
            width: 4rem;
            height: 3rem;
            border-radius: 1rem;
            border: none;
            font-size: 1.2rem;
            font-weight: bold;
            text-align: center;
            color: white;
        }

        button:active {
            background-color: #005af5;
        }

        input[type=range] {
            -webkit-appearance: none;
            width: 20rem;
            height: 1rem;

        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
        }

        input[type=range]::-webkit-slider-runnable-track {
            width: 20rem;
            border-radius: 1rem;
            height: 1rem;
            background-color: #005af5;

        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 2rem;
            width: 2rem;
            margin-top: -5px;
            /*使滑块超出轨道部分的偏移量相等*/
            background: #ffffff;
            border-radius: 50%;
            /*外观设置为圆形*/
            border: solid 0.125em rgba(205, 224, 230, 0.5);
            /*设置边框*/
            box-shadow: 0 .125em .125em #3b4547;
            /*添加底部阴影*/
        }

        textarea {
            width: 22rem;
            border-width: 0.1rem;
            font-size: 2.2rem;
            background-color: #F1F1F1;
        }
    </style>

</head>

<body>

    <div id="TPLsn01">
        <input type="number" id="TPLsn01_number">
        <br>


        <div id="btn_div">
            <button id="btn_minus">minus </button>
            <button id="btn_add">add</button>
        </div>

        <div id="slider_div">
            <input type="range" id="slider">
        </div>


        <textarea id="TPLsn01_txt" rows="4" cols="30" autocomplete="on" placeholder="请输入文本" autofocus="true">
        </textarea>
    </div>

    <script>
        //===============================这一部分是从安卓中获取格式,和editView那里的代码一样.=======================
        //从安卓中获取格式字符串
        let testFormatObj = {
            TPLsn01: {
                defaultNumber: 20,
                btn: {
                    usable: true,
                    step: 10,
                },
                slider: {
                    usable: true,
                    min: 10,
                    max: 99,
                    step: 5,
                },
            },
        };
        //let jsonFormat=window.androidObject.getAndroidFormat();
        let jsonFormat = JSON.stringify(testFormatObj);
        let formatObj = JSON.parse(jsonFormat);
        //console.log(formatObj);


        //============================这一部分是从安卓中获取记录值=======================
        let testValuetObj = {
            TPLsn01: {
                number_value: 1,
                txt_value: "失误失误",
            },
        };
        //从安卓中获取记录值
        //let jsonValue=window.android.getAndroidRecordValue();
        let jsonRecordValue = "";
        if (jsonRecordValue === "") {
            let defaultValueObj = {
                TPLsn01: {
                    number_value: 1,
                    txt_value: "失dededed误失误",
                },
            };
            defaultValueObj.TPLsn01.number_value = formatObj.TPLsn01.defaultNumber;
            jsonRecordValue = JSON.stringify(defaultValueObj);
        };
        let recordValueObj = JSON.parse(jsonRecordValue);
        console.log(recordValueObj);

        //==============获取控件====================
        let TPLsn01_number = document.getElementById("TPLsn01_number");
        let btn_add = document.getElementById("btn_add");
        let btn_minus = document.getElementById("btn_minus");
        let slider = document.getElementById("slider");
        let TPLsn01_txt = document.getElementById("TPLsn01_txt");


        //===============根据recordValueObj的值设置输入框和滑动条的显示===============
        function updateView() {
            TPLsn01_number.value = recordValueObj.TPLsn01.number_value;
            TPLsn01_txt.value = recordValueObj.TPLsn01.txt_value;
            slider.value = recordValueObj.TPLsn01.number_value;
        };


        //==============根据recordValueObj的值和格式字符串初始化控件==================
        updateView();//初始化输入框和滑动条的值,还有文本输入框的值,直接解决了.
        //判断是否要用按钮和滑动条
        let btn_div = document.getElementById("btn_div");
        let slider_div = document.getElementById("slider_div");
        if (formatObj.TPLsn01.btn.usable === false) {
            btn_div.style.display = "none";
        };
        if (formatObj.TPLsn01.slider.usable === false) {
            slider_div.style.display = "none";
        };

        //===============绑定事件======================================
        //输入框
        TPLsn01_number.onchange = function () {
            recordValueObj.TPLsn01.number_value = TPLsn01_number.value;
            updateView();
            console.log(recordValueObj);
        };
        //添加按钮
        btn_add.onclick = function () {
            recordValueObj.TPLsn01.number_value = recordValueObj.TPLsn01.number_value + formatObj.TPLsn01.btn.step;
            updateView();
        };
        //减少按钮
        btn_minus.onclick = function () {
            recordValueObj.TPLsn01.number_value = recordValueObj.TPLsn01.number_value - formatObj.TPLsn01.btn.step;
            updateView();
        };
        //滑动条
        slider.min = formatObj.TPLsn01.slider.min;
        slider.max = formatObj.TPLsn01.slider.max;
        slider.step = formatObj.TPLsn01.slider.step;
        slider.onchange = function () {
            recordValueObj.TPLsn01.number_value = slider.value;
            updateView();
        };
        //文本输入框
        TPLsn01_txt.onchange = function () {
            recordValueObj.TPLsn01.txt_value = TPLsn01_txt.value;
            console.log(recordValueObj);
        };

        //====================提供给安卓的借口,返回记录值的json=====================
        window.getJSRecordView = function () {
            return JSON.stringify(recordValueObj);
        };
        window.getJsFormat = function () {
            return JSON.stringify(formatObj);
        };
    </script>
</body>

</html>